<template>
	<v-row justify="center">
		<v-dialog v-model="$store.state.UserLogin" max-width="500px">
			<v-card>
				<v-card-title>
					<v-btn color="grey darken-3" tile height="58px" width="80px" text
						style="right: 0px; top: 0px; font-size: 18px;" absolute @click="$store.state.UserLogin = false">
						<v-icon size="26">mdi-close</v-icon>
					</v-btn>
				</v-card-title>

				<v-card-text>
					<v-container>
						<v-row style="margin-top: 10px;">
							<span class="text-h4" style="margin: auto;">登录</span>
						</v-row>
						<v-row style="margin-top: 20px;">
							<v-text-field label="Email" :rules="rule.emailRules" v-model="user.email" required
								hint="不知道的话,就尝试输入一下QQ邮箱吧!"></v-text-field>
						</v-row>
						<v-row>
							<v-text-field label="password" v-model="user.password" type="password" required
								hint="这个我也不知道,你也不知道的话就只有找回密码了!">
							</v-text-field>
						</v-row>
						<v-row style="margin-top: -10px; height: 60px;">
							<v-checkbox color="light-blue lighten-1" style="height: 30px;" label="记住密码"
								v-model="user.remenberme" left></v-checkbox>
							<v-text class="textbtn" @click="register()">没有账号,注册一个</v-text>
							<v-text class="textbtn">找回密码</v-text>
						</v-row>
					</v-container>
					<v-row style="height: 70px; margin-top: 4px;">
						<v-btn @click="login()" color="success" elevation="0" height="45px"
							style="font-size: 18px; margin: 0 10px; flex: 1;">
							登录
						</v-btn>
					</v-row>
				</v-card-text>
			</v-card>
		</v-dialog>
	</v-row>
</template>

<script>
	export default {
		name: "Login",
		data() {
			return {
				user: {
					email: null,
					password: null,
					remenberme: false
				},
				rule: {
					emailRules: [
						v => !!v || '邮箱号不正确',
						v => /.+@.+/.test(v) || '邮箱号不正确',
					],
				}
			}
		},
		created() {},
		methods: {
			login() {
				console.log(this.user)
				this.$store.state.UserLogin = false
			},
			register() {
				this.$store.state.UserLogin = false
				this.$store.state.UserRegister = true
			}
		}
	}
</script>

<style scoped>
	* {
		/* 文本不可复制 */
		-moz-user-select: none;
		-o-user-select: none;
		-khtml-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	.textbtn {
		height: 20px;
		cursor: pointer;
		transition: all 0.1s;
		margin: auto 0 auto 20px;
		padding: 0 2px;
	}

	.textbtn:hover {
		background: rgba(0, 0, 0, 0.1);
	}
</style>
